* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: rgba(32, 31, 31, 1);

}




.box{
    
    height: auto;
    border: 2px solid rgb(175, 172, 172);
    width: 70%;
    margin: auto;
    margin-top: 39px;
    transition: all 0.1s ease 0.1s;
    position: relative;
    text-align: center;
    background: rgba(217, 217, 217);

}

.box img{
    width: 100%;
    height: auto;
  justify-content: center;
 /* border-radius: 23px; */
  background-size: cover;
  padding: 3px;
}


.fa-solid {
    font-size: 27px;
    position: absolute;
    left: 14px;
    top: 14px;
    color: white;
}


.box h1{
    padding: 15px;
  text-align: center;
  color: rgb(22, 22, 22);
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
font-weight: 800;
font-size: 24px;
}
.container {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
    cursor: pointer;
    margin-top: 4vw;
  }

  .box:hover{
    box-shadow: 10px 10px 20px rgba(158, 219, 58, 1);
  }
  @media only screen and (max-width: 700px) {
    .container {
      width: 49.99999%;
      margin: 6px 0;
    }
    
  }

  @media only screen and (max-width: 500px) {
    .container {
      width: 100%;
    }
  }






  .mobile-menu {
    position: fixed;
    top: 0;
    right: 100%; /* Change 'right' to 'left' */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: left 0.5s ease; /* Adjust 'left' here as well */
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu a {
    color: white;
    text-decoration: none;
    font-size: 24px;
    margin: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.3s ease;
}

.mobile-menu.active a {
    opacity: 1;
    transform: translateY(0);
}

/* Style for the close button */
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.close-button svg {
    fill: white;
}
/* Style for the mobile menu */
.md:hidden.container {
position: absolute;
top: 5px;
left: 6px; /* Change 'right' to 'left' */
cursor: pointer;
}

/* CSS for the hover effect with an underline */
.nav-link {
    position: relative; /* Relative positioning for the anchor elements */
    text-decoration: none;
    color: white;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px; /* Add space below the text */
    background-color: #9EDB3A;
    height: 4px;
    width: 0;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    right: 0; /* When hovering, move the underline to the right */
}
.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}